<!DOCTYPE html>
<html>
<head>
    <title>Space Invaders</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
           	/* overflow: hidden; */
        }

        #nebula {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        #gameWindow {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        #gameCanvas {
            width: 800px;
            height: 600px;
        }

        #instructions {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div id="nebula"></div>
    <div id="gameWindow">
        <canvas id="gameCanvas"></canvas>
    </div>
    <div id="instructions">
        <p>Move using the arrow keys, and press the space bar to fire at the invaders! Goodluck!</p>
    </div>
<script type="text/javascript">
<!--
    var animate;
    var imgObj = null;
    //var bg = null;
    var INITIAL_HEIGHT = "270px";
    function init() {
        bg = document.getElementById("background");
        imgObj = document.getElementById('shipcannon');
        imgObj.style.position = 'relative';
        imgObj.style.top = INITIAL_HEIGHT;
        imgObj.style.left = "150px";
    }

    function moveUp(){
        imgObj.style.top = parseInt(imgObj.style.top) + -10 + 'px';
        animate = setTimeout(moveUp, 20);
        if (imgObj.style.top == "0px") {
            stopUp();
        }
    }
    function stopUp(){
        clearTimeout(animate);
        imgObj.style.top = INITIAL_HEIGHT; //generalize
    }

    function moveRight() {
        imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px';
        animate = setTimeout(moveRight, 20);
        if (imgObj.style.left == "300px") {
            stopRight();
        }
    }
    function stopRight() {
        clearTimeout(animate);
        imgObj.style.left = '0px';
    }

    function moveLeft() {
        imgObj.style.left = parseInt(imgObj.style.left) + -5 + 'px';
        animate = setTimeout(moveLeft, 20);
        if (imgObj.style.left == "0px") {
            stopLeft();
        }
    }
    function stopLeft() {
        clearTimeout(animate);
        imgObj.style.left = '300px';
    }

    document.onkeydown = function (e) {
        e = e || event
        switch (e.keyCode) {
            case 37:
                moveLeft();
                return false;
            case 38:
                moveUp();
                return false;
            case 39:
                moveRight();
                return false;
        }
    }

    this.settings = {
        gameWidth: 400,
        gameHeight: 300,
        invaderAttackSpeed: 0,
        invaderSpeed: 5,
        shipSpeed: 10,
        invaderDropDistance: 20,
        rocketSpeed: 30,
        bombSpeed: 15,
        invaderRows: 3,
        invaderCols: 5,
        pointsPerKill: 10
    };

    this.lives = 3;
    this.level = 0;

    this.dropDistance = 0;

    this.ship = null;
    this.invaders = [];
    this.rockets = [];
    this.bombs = [];

    function start() {
        for (var i = 1; i <= this.settings.invaderRows; i++) {
            for (var j = 1; j <= this.settings.invaderCols; j++) {
                var idstring = "A" + i + j;
                imgObj = document.getElementById(idstring);
                invaders.push(new invader(0, 0, imgObj, idstring));
            }
        }
        setInterval(update,100);
      //  imgObj = document.getElementById("A33");
       // imgObj.parentNode.removeChild(imgObj);
        //imgObj = document.getElementById("A34");
        //imgObj.style.left = (parseInt(imgObj.style.left) + 20) + "px";
    }

    function update() {
        var hitLeft = false;
        var hitRight = false;
        var hitBottom = false;
        for (i = 0; i < this.invaders.length; i++) {
            var invader = document.getElementById(this.invaders[i].imageID).style;
            //alert("First " + invader.left);
            invader.left = (parseInt(invader.left) + this.settings.invaderSpeed) + "px"; //fix so it checks the edge
            //alert("Tada " + invader.left);
            if (parseInt(invader.left) >= this.settings.gameWidth) {
                hitRight = true;
            } else if (parseInt(invader.left) <= 0) {
                hitLeft = true;
            }
        }

        if (hitRight || hitLeft) {
            this.settings.invaderSpeed = -this.settings.invaderSpeed;
            for (i = 0; i < this.invaders.length; i++) {
                invader = document.getElementById(this.invaders[i].imageID).style;
                invader.top = (parseInt(invader.top) + this.settings.invaderDropDistance) + "px";
            }
            //if (this.invaders[invaders.length - 1].y >= this.settings.gameHeight) {
            //    this.lives = 0;
            //}
        }
    }

    function invader(x, y, imgRef, imgID) {
        imageRef = imgRef;
        this.x = x;
        this.y = y;
        imageRef.style.top = x + "px";
        imageRef.style.left = y + "px";
        this.imageID = imgID;
    }

   //window.onload = init;
    window.onload = start;
//-->
</script>
<body>

<style>
#background 
{
    height:300px;
    position:absolute;
    z-index:-1;
}

.alien 
{
    float:left;
    position:relative;
    padding:5px;
    height:20px;
    width:20px;
}

.spacing
{
    clear:both;
}
</style>

<img id="background" src="Nebula_bg.jpeg" alt="Background" onclick="moveUp();"/>
<img id="shipcannon" src="cannon.jpg" alt="Laser" />
    <div>
        <img class="alien" src="alien.png" alt="A11" id="A11" />
        <img class="alien" src="alien.png" alt="A12" id="A12" />
        <img class="alien" src="alien.png" alt="A13" id="A13" />
        <img class="alien" src="alien.png" alt="A14" id="A14" />
        <img class="alien" src="alien.png" alt="A15" id="A15" />
    </div>
    <div class="spacing">
        <img class="alien" src="alien.png" alt="A21" id="A21" />
        <img class="alien" src="alien.png" alt="A22" id="A22" />
        <img class="alien" src="alien.png" alt="A23" id="A23" />
        <img class="alien" src="alien.png" alt="A24" id="A24" />
        <img class="alien" src="alien.png" alt="A25" id="A25" />
    </div>
    <div class="spacing">
        <img class="alien" src="alien.png" alt="A31" id="A31" />
        <img class="alien" src="alien.png" alt="A32" id="A32" />
        <img class="alien" src="alien.png" alt="A33" id="A33" />
        <img class="alien" src="alien.png" alt="A34" id="A34" />
        <img class="alien" src="alien.png" alt="A35" id="A35" />
    </div>
</body>
</html>
